<template>
  <div class="description">
    <div class="text box box-jc tx-c">
      用手机拍摄一张你最潮的相片，
      <br>你的相片就可到长沙 IFS L7的
      <br>户外喷水屏中。
    </div>
    <img @click="selectPhoto()" class="description-button" :src="require('../assets/images/description-button.png')" alt="">
    <input ref="file" class="file" type="file" accept="image/*" @change="readImage">
    <div class="bottom">
      <div class="trapezoid1"></div>
      <div class="trapezoid2"></div>
      <div class="screen">
        <div class="head-list">
          <transition name="fade">
            <img v-if="headIndex===index" v-for="(item, index) in headList" :value="item" :key="index" :src="item" alt="">
          </transition>
        </div>
        <fountain ></fountain>
      </div>
    </div>
  </div>
</template>

<script>
import lrz from 'lrz'
import fountain from '@/components/fountain'
export default {
  name: 'description',
  components: {
    fountain
  },
  data () {
    return {
      headList: [
        require('../assets/images/head1.png'),
        require('../assets/images/head2.png')
      ],
      headIndex: 0,
      timer: null
    }
  },
  mounted () {
    this.initScreen()
  },
  methods: {
    initScreen () {
      this.timer = setInterval(() => {
        if (this.headIndex >= this.headList.length - 1) {
          this.headIndex = 0
        } else {
          this.headIndex++
        }
      }, 5000)
    },
    readImage ($event) {
      this.$store.commit('isLoading', true)
      var self = this
      var file = $event.target.files[0]
      lrz(file, { width: 800 })
        .then(rst => {
          this.$store.commit('base64', rst.base64)
          this.$store.commit('processIndex', 3)
        })
        .always(() => {
          this.$store.commit('isLoading', false)
        })
    },
    selectPhoto () {
      this.$refs.file.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.description{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.text{
  width:100%;
  color:#FFF;
  font-size:.44rem;
  font-weight:500;
  line-height:.62rem;
  margin-top:1.8rem;
}
.description-button{
  display:block;
  margin:.7rem auto;
  width:2.9rem;
}
.file{
  display:none;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2.2rem;
  background-color:#56d1c8;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:2.4rem;
  height:0;
  border-width:0 1.5rem 2.2rem 1.5rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:2rem;
  border-width:0 .66rem 1rem .66rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
// 312*648
.screen{
  position:absolute;
  bottom:1.7rem;
  left:50%;
  transform: translateX(-50%);
  border:.1rem solid #FFF;
  width:2.1rem;
  height:4.362rem;
  .head-list{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
  }
  img{
    position: absolute;
    bottom:0;
    width:100%;
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 2s
}
.fade-enter, .fade-leave-to {
  opacity: .33
}
</style>
